@import 'theme';
@import 'functions';
@import 'mixins';

$cx-search-facet-trbl-padding: 0 !default;

$cx-search-facet-list-trbl-margin: 0 0 32px 0 !default;

$cx-search-facet-mobile-btn-trbl-margin: 0 0 20px 0 !default;

$cx-search-facet-filter-header-trbl-margin: 0 0 20px 0 !default;
$cx-search-facet-filter-header-trbl-padding: 0 0 10px 0 !default;

$cx-search-facet-filter-header-mobile-trbl-margin: 0 20px 0px 0 !default;

$cx-search-facet-filter-trbl-margin: 0 0 40px 0 !default;
$cx-search-facet-filter-color: 'light' !default;
$cx-search-facet-filter-sm-trbl-margin: 0 0 0 0 !default;

$cx-search-facet-filter-pill-trbl-padding: 10px 10px 10px 13px !default;
$cx-search-facet-filter-pill-trbl-margin: 10px 10px 5px 0 !default;
$cx-search-facet-filter-pill-border-radius: 4px !default;

$cx-search-facet-filter-pill-button-trbl-margin: 0 0 0 10px;

$cx-search-facet-header-border: 1px solid !default;
$cx-search-facet-header-border-color: 'light' !default;
$cx-search-facet-header-color: 'text' !default;
$cx-search-facet-header-trbl-padding: 0 0 10px 0 !default;
$cx-search-facet-header-trbl-margin: 0 0 17px 0 !default;
$cx-search-facet-header-link-font-size: 25px !default;
$cx-search-facet-header-link-top: 10px !default;
$cx-search-facet-header-link-icon-height: 2px !default;

$cx-search-facet-header-icon-color: 'secondary' !default;

$cx-search-facet-label-color: 'secondary' !default;
$cx-search-facet-label-selected-color: 'primary' !default;
$cx-search-facet-label-margin: 0 !default;

$cx-search-facet-label-wrapper-trbl-padding: 0 0 0 0 !default;
$cx-search-facet-label-wrapper-trbl-margin: 0 0 15px 0 !default;

$cx-search-facet-checkbox-trbl-margin: 0 10px 0 0 !default;
$cx-search-facet-checkbox-transition: 0.3s !default;
$cx-search-facet-checkbox-rectangular-size: 22px !default;
$cx-search-facet-checkbox-background-color__hover: 'light' !default;

$cx-search-facet-item-link-trbl-margin: 0 0 16px 0 !default;

$cx-search-facet-modal-height: 100vh !default;

$cx-search-facet-modal-label-trbl-margin: 0 0 27px 0 !default;
$cx-search-facet-modal-footer-trbl-margin: 0 0 0 20px !default;
$cx-search-facet-modal-footer-btn-width: 50% !default;

.cx-search-facet {
  &-list {
    padding: $cx-search-facet-trbl-padding;
    list-style: none;
    margin: $cx-search-facet-list-trbl-margin;

    .form-check {
      padding: $cx-search-facet-label-wrapper-trbl-padding;
      margin: $cx-search-facet-label-wrapper-trbl-margin;
    }

    &__label {
      @include var-color('color', $cx-search-facet-label-color);
      @include type('6');
      font-weight: $font-weight-normal;
      position: relative;
      margin: $cx-search-facet-label-margin;
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
      cursor: pointer;

      &:hover .cx-search-facet-checkbox:not(:checked) {
        @include var-color(
          'background-color',
          $cx-search-facet-checkbox-background-color__hover
        );
      }

      &-text {
        line-height: $cx-search-facet-checkbox-rectangular-size;
      }
    }

    &__toggle-button {
      cursor: pointer;
    }

    &__item--link {
      @include type('');
      margin: $cx-search-facet-item-link-trbl-margin;
    }

    &__item--show-more {
      &:after {
        content: '\003e';
      }
    }
  }

  &-checkbox {
    position: relative;
    margin: $cx-search-facet-checkbox-trbl-margin;
    min-width: $cx-search-facet-checkbox-rectangular-size;
    transition: $cx-search-facet-checkbox-transition;

    &:checked + .cx-search-facet-list__label-text {
      @include var-color('color', $cx-search-facet-label-selected-color);
    }
  }

  &-header {
    border-bottom: $cx-search-facet-header-border;
    @include type('4');
    @include var-color('color', $cx-search-facet-header-color);
    @include var-color('border-color', $cx-search-facet-header-border-color);
    padding: $cx-search-facet-header-trbl-padding;
    margin: $cx-search-facet-header-trbl-margin;
    display: block;
    font-weight: $font-weight-semi;

    &__link {
      &:after {
        float: right;
        font-size: $cx-search-facet-header-link-font-size;
        line-height: 0;
        position: relative;
        top: $cx-search-facet-header-link-top;
        font-weight: $font-weight-normal;
        @include var-color('color', $cx-search-facet-header-icon-color);
      }

      &[aria-expanded='false'] {
        &:after {
          content: '+';
        }
      }

      &[aria-expanded='true'] {
        &:after {
          content: '\2013';
          height: $cx-search-facet-header-link-icon-height;
        }
      }
    }
  }

  &-filter__container {
    margin: $cx-search-facet-filter-trbl-margin;

    @include media-breakpoint-down(md) {
      margin: $cx-search-facet-filter-sm-trbl-margin;
    }
  }

  &-filter__header {
    @include type('3');
    @include var-color('color', $cx-search-facet-header-color);
    padding: $cx-search-facet-filter-header-trbl-padding;
    margin: $cx-search-facet-filter-header-trbl-margin;

    @include media-breakpoint-down(md) {
      display: inline-block;
      margin: $cx-search-facet-filter-header-mobile-trbl-margin;
    }
  }

  &-filter__pill {
    @include var-color('background', $cx-search-facet-filter-color);
    padding: $cx-search-facet-filter-pill-trbl-padding;
    margin: $cx-search-facet-filter-pill-trbl-margin;
    display: flex;
    align-items: flex-start;
    border-radius: $cx-search-facet-filter-pill-border-radius;

    span {
      flex: 1 1 auto;
    }

    button {
      margin: $cx-search-facet-filter-pill-button-trbl-margin;
      flex: 0 0 1rem;
    }
  }

  &-modal__title {
    @include type('3');
  }

  @include media-breakpoint-down(md) {
    display: none;
  }

  &__mobile {
    @include media-breakpoint-up(lg) {
      display: none;
    }

    @include media-breakpoint-down(md) {
      &--btn {
        margin: $cx-search-facet-mobile-btn-trbl-margin;
      }
    }
  }

  @include media-breakpoint-down(md) {
    &__modal-body {
      overflow-y: scroll;
      height: $cx-search-facet-modal-height;
    }

    &__modal--label {
      @include type('4');
      font-weight: $font-weight-semi;
      margin: $cx-search-facet-modal-label-trbl-margin;
    }

    &__modal--footer {
      .btn {
        width: $cx-search-facet-modal-footer-btn-width;

        &:last-child {
          margin: $cx-search-facet-modal-footer-trbl-margin;
        }
      }
    }
  }
}
